<template>
  <view class="body">
    <image class="bg" src="https://ainengli.hzjrsw.com/jkhx/physicalBg.png"></image>
    <view class="base_info">
      <image v-if="userInfo.gender == '女性'" class="avatar" src="@/static/image/hmm/woman.png" />
      <image v-else class="avatar" src="@/static/image/hmm/man.png" />
      <view class="right_info">
        <view class="baseinfo">
          <text class="name">{{ userInfo.patName }}</text>
          <text class="age">{{ userInfo.age }}岁</text>
        </view>
        <view class="time">体检时间： {{ reportTime }}</view>
      </view>
    </view>
    <view v-if="reportInfo && reportInfo.url" class="tabs">
      <image
        v-if="state.tabActive == 0"
        class="img_tab"
        src="@/static/image/raozg/physical_tab1.png"
      />
      <image
        v-if="state.tabActive == 1"
        class="img_tab"
        src="@/static/image/raozg/physical_tab2.png"
      />
      <image
        v-if="state.tabActive == 2"
        class="img_tab"
        src="@/static/image/raozg/physical_tab3.png"
      />
      <view @click="tabChange(0)" :class="['tab', state.tabActive == 0 ? 'active' : '']">
        <view class="tab_text">AI报告解读</view>
      </view>
      <view @click="tabChange(1)" :class="['tab', state.tabActive == 1 ? 'active' : '']">
        <view class="tab_text">完整报告</view>
      </view>
      <view @click="tabChange(2)" :class="['tab', state.tabActive == 2 ? 'active' : '']">
        <view class="tab_text">PDF报告</view>
      </view>
    </view>
    <view v-else class="tabs">
      <image v-if="state.tabActive == 0" class="img_tab" src="@/static/image/raozg/tab_left.png" />
      <image v-if="state.tabActive == 1" class="img_tab" src="@/static/image/raozg/tab_right.png" />
      <view @click="tabChange(0)" :class="['tab', state.tabActive == 0 ? 'active' : '']">
        <view class="tab_text">AI报告解读</view>
      </view>
      <view @click="tabChange(1)" :class="['tab', state.tabActive == 1 ? 'active' : '']">
        <view class="tab_text">完整报告</view>
      </view>
    </view>
    <AiReport
      v-if="state.tabActive == 0 && JSON.stringify(reportInfo) !== '{}'"
      :conclusion="reportInfo.conclusion"
    ></AiReport>
    <CompleteReport
      :peTypeList="reportInfo.peTypeList"
      :suggest="reportInfo.report"
      v-if="state.tabActive == 1"
    ></CompleteReport>
    <PdfReport :pdfUrl="reportInfo.url" v-if="state.tabActive == 2"></PdfReport>
  </view>
</template>

<script setup lang="ts">
import { onLoad, onShow } from '@dcloudio/uni-app'
import { label_list, scale_list } from '@/api/body'
import { getScaleInfo } from '@/api/dataFix'
import { ref, reactive } from 'vue'
import { throttle, deepCopy } from '@/utils/tools'
import store from '@/store'
import AiReport from './reportDetail/aiReport.vue'
import CompleteReport from './reportDetail/completeReport.vue'
import PdfReport from './reportDetail/pdfReport.vue'
import { getPeDetail } from '@/api/report'

const state = reactive({
  tabActive: 0
})
const userInfo = ref({})
const reportTime = ref('')
const reportNo = ref('')
const reportInfo = ref({})

onLoad((option) => {
  reportTime.value = option.time ? option.time : ''
  reportNo.value = option.reportNo ? option.reportNo : ''
})

onShow(() => {
  userInfo.value = JSON.parse(uni.getStorageSync('userInfo')).patientInfo
  getData()
})

const getData = () => {
  getPeDetail(reportNo.value).then((res) => {
    reportInfo.value = res.data
  })
}

const tabChange = (index: number) => {
  state.tabActive = index
}
</script>

<style lang="scss" scoped>
.body {
  height: 100vh;
  position: relative;
  overflow: hidden;
  .bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 750rpx;
    height: 322rpx;
    z-index: 1;
  }
  .base_info {
    background: #ffffff;
    box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(173, 211, 205, 0.33);
    border-radius: 16rpx;
    margin: 32rpx;
    padding: 32rpx;
    margin-bottom: 40rpx;
    display: flex;
    gap: 24rpx;
    position: relative;
    z-index: 2;
    .avatar {
      width: 84rpx;
      height: 84rpx;
    }
    .right_info {
      .name {
        font-weight: 500;
        font-size: 36rpx;
        color: #222222;
      }
      .age {
        font-weight: 400;
        font-size: 28rpx;
        color: #666666;
        margin-left: 20rpx;
      }
      .time {
        font-weight: 400;
        font-size: 24rpx;
        color: #666666;
        margin-top: 8rpx;
      }
    }
  }
  .tabs {
    height: 100rpx;
    display: flex;
    justify-content: space-around;
    position: relative;
    z-index: 3;
    .img_tab {
      width: 750rpx;
      height: 100rpx;
      position: absolute;
      left: 0;
      top: 0;
    }
    .tab {
      font-weight: 400;
      font-size: 28rpx;
      color: #222222;
      height: 100%;
      display: flex;
      align-items: center;
      position: relative;
      .tab_text {
        transform: translateY(10rpx);
      }
    }
    .active {
      font-weight: 500;
      font-size: 32rpx;
      color: #00d1b6;
      .tab_text {
        transform: none;
      }
    }
    .active::after {
      content: '';
      display: block;
      width: 44rpx;
      height: 6rpx;
      background: #00d1b6;
      border-radius: 4rpx;
      position: absolute;
      left: calc(50% - 22rpx);
      bottom: 0rpx;
    }
  }
}
</style>
